<!DOCTYPE html>
<html>
    <head>
        <!-- Notes: This should be open in its original path-->
        <meta charset="utf-8">
        <meta name="zoraxy.csrf.Token" content="{{.csrfToken}}">
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <script src="../script/jquery-3.6.0.min.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
        <script src="../script/utils.js"></script>
    </head>
    <body>
        <link rel="stylesheet" href="../darktheme.css">
        <script src="../script/darktheme.js"></script>
        <br>
        <div class="ui container">
            <!-- 
            <div class="ui header">
                <div class="content">
                    Alias Hostname
                    <div class="sub header epname"></div>
                </div>
            </div>
            <div class="ui divider"></div>-->
            <div class="scrolling content ui form">
                <div id="inlineEditBasicAuthCredentials" class="field">
                    <p>Enter alias hostname or wildcard matching keywords for <code class="epname"></code></p>
                    <table class="ui basic very compact unstackable celled table">
                        <thead>
                        <tr>
                            <th>Alias Hostname</th>
                            <th>Remove</th>
                        </tr></thead>
                        <tbody id="inlineEditTable">
                        <tr>
                            <td colspan="2"><i class="ui green circle check icon"></i> No Alias Hostname</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="ui divider"></div>
                    <div class="three small fields">
                        <div class="field">
                            <label>Alias Hostname</label>
                            <input id="aliasHostname" type="text" placeholder="alias.mydomain.com" autocomplete="off">
                            <small>Support wildcards e.g. alias.mydomain.com or *.alias.mydomain.com</small>
                        </div>
                        <div class="field" >
                            <button class="ui basic button" onclick="addAliasToRoutingRule();"><i class="green add icon"></i> Add Alias</button>
                        </div>
                        <div class="ui divider"></div>
                    </div>
                </div>
            </div>
        </div>
            
        <br><br><br><br>

        </div>
        <script>
            let aliasList = [];
            let editingEndpoint = {};

            if (window.location.hash.length > 1){
                let payloadHash = window.location.hash.substr(1);
                try{
                    payloadHash = JSON.parse(decodeURIComponent(payloadHash));
                    $(".epname").text(payloadHash.ep);
                    editingEndpoint = payloadHash;
                }catch(ex){
                    console.log("Unable to load endpoint data from hash")
                }
            }

            function initAliasNames(){
                $.cjax({
                    url: "/api/proxy/detail",
                    method: "POST",
                    data: {
                        "type":"host",
                        "epname": editingEndpoint.ep
                    },
                    success: function(data){
                        if (data.error != undefined){
                            //This endpoint not exists?
                            alert(data.error);
                            return;
                        }else{
                            $("#inlineEditTable").html("");
                            if (data.MatchingDomainAlias != undefined){
                                aliasList = data.MatchingDomainAlias;
                                renderAliasList();
                            }else{
                                //Assume no alias
                                $("#inlineEditTable").html(`<tr>
                                    <td colspan="2"><i class="ui green circle check icon"></i> No Alias Hostname</td>
                                </tr>`);
                            }

                            
                        }
                    }
                })
            }
            initAliasNames();

            function removeAliasDomain(targetDomain){
                aliasList.splice(aliasList.indexOf(targetDomain), 1);
                saveCurrentAliasList(function(data){
                    if (data.error != undefined){
                        parent.msgbox(data.error);
                    }else{
                        initAliasNames();
                        parent.msgbox("Alias hostname removed")
                    }
                });
            }

            function addAliasToRoutingRule(){
                let newAliasHostname = $("#aliasHostname").val().trim();
                aliasList.push(newAliasHostname);
                $("#aliasHostname").val("");
                saveCurrentAliasList(function(data){
                    if (data.error != undefined){
                        parent.msgbox(data.error);
                    }else{
                        parent.msgbox("New alias hostname added")
                        initAliasNames();
                    }
                    
                });
            }

            function saveCurrentAliasList(callback=undefined){
                $.cjax({
                    url: "/api/proxy/setAlias",
                    method: "POST",
                    data:{
                        "ep":editingEndpoint.ep,
                        "alias": JSON.stringify(aliasList)
                    },
                    success: function(data){
                        if (callback != undefined){
                            callback(data);
                        }

                        if (data.error == undefined && parent != undefined && parent.document != undefined){
                            //Try to update the parent object's rules if exists
                            parent.updateAliasListForEndpoint(editingEndpoint.ep, aliasList);
                        }
                    }
                })
            }

            function renderAliasList(){
                $("#inlineEditTable").html("");
                aliasList.forEach(aliasDomain => {
                    let domainLink = `<a href="//${aliasDomain}" target="_blank">${aliasDomain}</a>`
                    if (aliasDomain.includes("*")){
                        //This is a wildcard hostname
                        domainLink = aliasDomain;
                    }
                    $("#inlineEditTable").append(`<tr>
                        <td>${domainLink}</td>
                        <td><button class="ui basic mini circular icon button" onclick="removeAliasDomain('${aliasDomain}');"><i class="red trash icon"></i></button></td>
                    </tr>`);
                });

                if (aliasList.length == 0){
                    $("#inlineEditTable").html(`<tr>
                        <td colspan="2"><i class="ui green circle check icon"></i> No Alias Hostname</td>
                    </tr>`);
                }
            }

            function closeThisWrapper(){
                parent.hideSideWrapper(true);
            }
        </script>
    </body>
</html>